var medit={
    baseurl:"",
    saveurl:"",
    view:function(){
        return m("div.medit",[
            m("div.medit_bts",[
                m("span.iconfont.icon-jiacu",{title:"加粗",onclick:medit.SetBold}),
                m("span.iconfont.icon-yanse",{title:"颜色",onclick:medit.SelectColor}),
                m("span.iconfont.icon-juzuo",{title:"居左",onclick:medit.SetLeft}),
                m("span.iconfont.icon-juzhong",{title:"居中",onclick:medit.SetCenter}),
                m("span.iconfont.icon-juyou",{title:"居右",onclick:medit.SetRight}),
                m("span.iconfont.icon-shouhangsuojin",{title:"首行缩进",onclick:medit.SetEm}),
                medit.saveurl==""?[]:[
                    m("span.iconfont.icon-tianjiatupian_huaban",{title:"上传图片",onclick:medit.Upfile}),
                    m("input[type=file]#medit_upfile",{onchange:medit.GetImg,accept:"image/*"})
                ],
                m("ul.medit_color",[
                    m("li",{style:"background-color:black;",onclick:medit.SetColor}),
                    m("li",{style:"background-color:red;",onclick:medit.SetColor}),
                    m("li",{style:"background-color:blue;",onclick:medit.SetColor}),
                    m("li",{style:"background-color:green;",onclick:medit.SetColor}),
                    m("li",{style:"background-color:silver;",onclick:medit.SetColor}),
                    m("li",{style:"background-color:orange;",onclick:medit.SetColor})
                ])
            ]),
            m("div.medit_content",{
                contenteditable:true,
                onclick:medit.Init,
                onmouseup:medit.GetSelect,
                onblur:medit.GetSelect
            })
        ])
    },
    oninit:function(){
        m.DloadingFiles([medit.baseurl+"medit.css",medit.baseurl+"/font/iconfont.css"],function(){});
    }
}
//初始化
medit.Init=function(){
    if(this.innerHTML==""){
        this.innerHTML="<div></div>";
        return;
    }
}
//获得选中内容
medit.SelectVal='';
medit.SelectElem='';
medit.GetSelect=function(){
    medit.SelectVal=window.getSelection().toString();
    medit.SelectElem=window.getSelection().baseNode;
}
//获得父DIV
medit.GetFatherDiv=function(elem){
    while(true){
        if(elem.tagName=="DIV"){
            return elem;
        }
        elem=elem.parentNode;
    }
}
//加粗
medit.SetBold=function(){
    if(medit.SelectVal==""){
        return;
    }
    console.log(medit.SelectElem.parentNode);
    var elem=medit.GetFatherDiv(medit.SelectElem.parentNode);
    if(medit.SelectElem.parentNode.tagName=="B"){
        elem.innerText=elem.innerHTML.replace("<b>","").replace("</b>","");
    }else{
        elem.innerHTML=elem.innerText.replace(medit.SelectVal,"<b>"+medit.SelectVal+"</b>");
    }
}
//首行缩进
medit.SetEm=function(){
    var elem=medit.GetFatherDiv(medit.SelectElem.parentNode);
    if(elem.style.textIndent=="2em"){
        elem.style.textIndent="0";
    }else{
        elem.style.textIndent="2em";
    }
}
//居左
medit.SetLeft=function(){
    var elem=medit.GetFatherDiv(medit.SelectElem.parentNode);
    elem.style.textAlign="left";
}
//居右
medit.SetRight=function(){
    var elem=medit.GetFatherDiv(medit.SelectElem.parentNode);
    elem.style.textAlign="right";
}
//居中
medit.SetCenter=function(){
    var elem=medit.GetFatherDiv(medit.SelectElem.parentNode);
    elem.style.textAlign="center";
}
//选中颜色
medit.SelectColor=function(){
    if(document.querySelector(".medit_color").style.display=="block"){
        document.querySelector(".medit_color").style.display="none";
    }else{
        document.querySelector(".medit_color").style.display="block";
    } 
}
//居中
medit.SetColor=function(){
    console.log(medit.SelectVal);
    var elem=medit.GetFatherDiv(medit.SelectElem.parentNode);
    console.log(elem.innerText);
    elem.innerHTML=elem.innerHTML.replace(medit.SelectVal,"<font color="+this.style.backgroundColor+">"+medit.SelectVal+"</font>");
    document.querySelector(".medit_color").style.display="none";
}
//上传文件
medit.Upfile=function(){
    if(medit.saveurl==""){
        alert("没有配置图片存储路径");
        return;
    }
    document.querySelector("#medit_upfile").click();
}
//文件读取
medit.GetImg=function(){
    if(this.files[0].type!="image/jpeg" && this.files[0].type!="image/png" && this.files[0].type!="image/gif"){
        alert("请选择图片文件");
        return;
    }
    if(this.files[0].size>5*1024*1024){
        alert("请选择图片必须小于5M");
        return;
    }
    document.querySelector("#medit_upfile").diabled=true;
    var reader=new FileReader();
    reader.readAsDataURL(this.files[0]);
    reader.onload=function(){
        //图片压缩
        var image=new Image();
        image.src=this.result;
        image.onload=function(){
            var canvas=document.createElement("canvas");
            var context=canvas.getContext("2d");
            var _w=600;//锁定宽度
            var _h=600*image.height/image.width;
            canvas.width=_w;
            canvas.height=_h;
            context.drawImage(image, 0, 0, _w, _h)
            var data = canvas.toDataURL('image/png');
            var postData=new FormData();
            postData.append("data",data);
            m.request({
                method:"POST",
                url:medit.saveurl,
                body:postData
            }).then(function(res){
                if(res.res=="OK"){
                    var div=document.createElement("div");
                    div.style.textAlign="center";
                    var imgElem=document.createElement("img");
                    imgElem.src=res.path;
                    imgElem.witdh="800px";
                    div.appendChild(imgElem);
                    document.querySelector(".medit_content").appendChild(div);
                }else{
                    alert(res.message);
                }
            })
        }
    }
}